<template>
	<view v-if="!!value" class="y-popup" @tap.stop="hide">
		<view class="y-popup-box" :class="[!!value ? 'show' : '', mode || '']" @click.stop><slot /></view>
	</view>
</template>

<script>
export default {
	props: ['value', 'mode'],
	methods: {
		hide(e) {
			this.$emit('input', '');
			this.clear(e);
		},
		clear(e) {
			this.$emit('close');
		}
	}
};
</script>

<style scoped lang="scss">
@keyframes bottomTop {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}
.y-popup {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: $uni-bg-color-mask;
	display: flex;
	align-items: center;
	justify-content: center;
	&-box {
		position: absolute;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		transform: translateY(100%);
		&.show {
			animation: bottomTop 0.5s;
			animation-fill-mode: forwards;
		}
		&.center {
			position: relative;
		}
	}
}
</style>
